<template>
	<view class="form-container">
		<nt-order-detail :orderInfo="commonForm.orderInfo"></nt-order-detail>
		<nt-card label="发票信息">
			<view class="form-item vertical">
				<view class="form-item__label">历史发票：</view>
				<view class="form-item__content" @tap="show = true">
					<u--input v-model="title" disabled placeholder="选择历史发票"></u--input>
					<text class="iconfont">&#xe6bb;</text>
				</view>
			</view>
			<view class="form-item vertical">
				<view class="form-item__label">发票内容：</view>
				<view class="form-item__content">
					<u--textarea 
						v-model="formData.invoice_content" 
						placeholder="请填写发票内容" 
						height="150" 
						autoHeight
						maxlength="-1"
						:confirmType="null"
						:autoHeight="true"
					></u--textarea>
				</view>
			</view>
			<view class="form-item vertical">
				<view class="form-item__label">金额：</view>
				<view class="form-item__content">
					<u--input v-model="formData.price" placeholder="请输入发票金额"></u--input>
				</view>
			</view>
			<view class="form-item vertical">
				<view class="form-item__label">税费：</view>
				<view class="form-item__content">
					<u--input 
						:value="formData.postage" 
						readonly 
						:placeholder="`开票金额*${commonForm.formConfig.tax || 0}=税费`"
					></u--input>
				</view>
			</view>
			<nt-button text="提交" @tap="submit"></nt-button>
		</nt-card>
		<u-picker :show="show" :columns="[historyList]" keyName="invoice_content" @cancel="show = false" @confirm="confirm" @close="show = false" closeOnClickOverlay></u-picker>
	</view>
</template>

<script>
import { invoiceEdit, getInvoiceHistory } from "@/api"
export default {
	data(){
		return {
			show: false,
			formData: {
				invoice_content: "",
				postage: "",
				images: [],
				price: ''
			},
			historyList: [],
			title: "",
			loading: false
		}
	},
	inject: ["commonForm"],
	watch: {
		"formData.price": function(n){
			this.formData.postage = this.setTaxation(n, this.commonForm.formConfig.tax)
		}
	},
	created(){
		this.getInvoiceHistoryList()
	},
	methods: {
		submit(){
			const { invoice_content, postage, images } = this.formData
			console.log(invoice_content)
			if(!invoice_content) return this.toast("发票内容不能为空")
			if(this.loading) return;
			this.loading = true
			invoiceEdit({
				realorder_id: this.commonForm.options.id,
				invoice_content,
				postage,
				images: images.map(item => item.url)
			}).then(res => {
				if(res.code == 1){
					this.toast("提交成功")
					setTimeout(() => this.back(), 1000)
				}
			}).finally(() => {
				this.loading = false
			})
		},
		confirm(e){
			this.formData.invoice_content = e.value[0].invoice_content
			this.title = e.value[0].invoice_title
			this.show = false
		},
		getInvoiceHistoryList() {
			getInvoiceHistory(this.commonForm.options.id).then(res => {
				if(res.code === 1){
					this.historyList = res.data
				}
			})
		},
		invoiceDetails(e){
			console.log(e);
			if(e){
				let postage = e.postage
				let price = ''
				if(postage>0){
					price = postage/0.03
				}
				this.formData = {
					invoice_content: e.invoice_content,
					postage: postage,
					images: e.images ? e.images : [],
					price: price
				}
			}
			
			
		}
	}
}
</script>
<style scoped lang="scss">
@import "./style.scss";
/deep/ .button-container{
	margin-top: 30rpx;
}
.form-item__content {
	/deep/.u-input{
		background: rgb(245, 247, 250)
	}
}

</style>